<%--
  Created by IntelliJ IDEA.
  User: 86151
  Date: 2019/7/15
  Time: 13:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="/static/zui/css/zui.min.css">
    <script src="/static/zui/lib/jquery/jquery.js"></script>
    <script src="/static/zui/js/zui.min.js"></script>
    <link href="/static/zui/lib/datatable/zui.datatable.min.css" rel="stylesheet">
    <script src="/static/zui/lib/datatable/zui.datatable.min.js"></script>
    <link href="/static/zui/lib/datetimepicker/datetimepicker.min.css" rel="stylesheet">
    <script src="/static/zui/lib/datetimepicker/datetimepicker.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <!--标题部分 -->
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid">
                <div class="span6" style="display:inline-block;">
                    <h3>
                        物料管理
                    </h3>
                </div>
                <div class="span6" style="float:right;margin-right: 20px;margin-top: 10px;">
                    <button type="button" style = "width:81px;heiht:33px;" class="btn btn-primary " data-toggle="modal" data-target="#myModal">
                        新增
                    </button>
                    <button type="button" onclick="dateTable()" class="btn btn-primary" >
                        数据报表
                   </button>
                    <button type="button" onclick="check()" class="btn btn-primary" >
                        批量删除
                    </button>
                </div>
            </div>
        </div>
    </div>
    <hr>

    <!--查询部分 -->
    <div class="row-fluid">
        <div class="span12">
            <form action="/fuzzyQuery" method="post">
                <div class="form-group">
                    <label   class="col-sm-1">物料编码</label>
                    <div class="col-sm-2">
                        <input type="text" id="ip1" name = "itemCode"  value="" class="form-control">
                    </div>
                    <label  class="col-sm-1">物料描述</label>
                    <div class="col-sm-2">
                        <input type="text" id="ip2" name = "itemDescription"  value="" class="form-control">
                    </div>
                    <label  class="col-sm-1">物料单位</label>
                    <div class="col-sm-2">
                        <select class="form-control" id="ip3" name = "itemUom" >
                            <option value="">请选择物料单位</option>
                            <option value="米">米</option>
                            <option value="平方米">平方米</option>
                            <option value="立方米">立方米</option>
                            <option value="千克">千克</option>
                            <option value="个">个</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                </div><br>
                <div class="form-group" style = "padding-top :30px">
                    <label  class="col-sm-1">生效时间从</label>
                    <div class="col-sm-2">
                        <input type="text" id="ip4" name = "startActiveDate"  value="" class="form-control">
                    </div>
                    <label  class="col-sm-1">生效时间至</label>
                    <div class="col-sm-2">
                        <input type="text" id="ip5" name = "endActiveDate"  value="" class="form-control">
                    </div>
                    <label  class="col-sm-1">是否启用</label>
                    <div class="col-sm-2">
                        <select class="form-control" id = "ip6" name = "enabledFlag">
                            <option value="">请选择</option>
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                    <label  class="col-sm-1"></label>
                    <div class="col-sm-2">
                        <button type="button" onclick="empty()" style = "width:81px;heiht:33px;" class="btn btn-primary " >
                            重置
                        </button>
                        <button type="submit" style = "width:81px;heiht:33px;" class="btn btn-primary " >
                            查询
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <hr>
    <!--显示部分 -->
    <div class="row-fluid" style = "padding-top:30px;">
        <div class="span12" >
            <table class="table datatable"  style = "line-height:30px;">
                <thead>
                <tr style = "text-align:center">
                    <th data-width="10">#</th>
                    <th data-width="100">物料编码</th>
                    <th data-width="200">物料描述</th>
                    <th data-width="50">物料单位</th>
                    <th data-width="100">生效时间从</th>
                    <th data-width="100">生效时间至</th>
                    <th data-width="50">是否启用</th>
                    <th data-width="100">操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${list}" var="list">
                    <tr style = "text-align:center">
                        <td>
                            <input type="checkbox" name="checkbox" value="${list.itemId}" />
                        </td>
                        <td><b>${list.itemCode}</b></td>
                        <td><b>${list.itemDescription}</b></td>
                        <td><b>${list.itemUom}</b></td>
                        <td><b>${list.startActiveDate}</b></td>
                        <td><b>${list.endActiveDate}</b></td>
                        <td>
                            <c:if test="${list.enabledFlag == 1}"><b>是</b></c:if>
                            <c:if test="${list.enabledFlag == 0}"><b>否</b></c:if>
                        </td>
                        <td>
                            <button type="button" onclick="Modify(${list.itemId})" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">修改</button>
                            <button type="button" onclick="del(${list.itemId})" class="btn btn-danger" data-toggle="modal" data-target="#myModal1">刪除</button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <!--分页 -->
    <div style="text-align: center;">
        <ul id="myPager" class="pager" data-ride="pager"  data-link-creator = "/pagingquery?page={page}&totalCount={recTotal}"  data-page="${pageNum}" data-rec-total="${count}" ></ul>
    </div>

    <!--新增-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action = "/addItem" method = "post">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" >The new material</h4>
                    </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label >物料描述</label>
                                <input type="text" style = "width:200px;margin-left:20px" class = "form-group"  name = "itemDescription"  value="">
                            </div>
                            <div class="form-group" >
                                <label >物料单位</label>
                                <input type="text" style = "width:200px;margin-left:20px"  class = "form-group" name = "itemUom"  value="">
                            </div>
                            <div class="form-group" >
                                <label >生效时间起</label>
                                <input type="text" style = "width:200px;margin-left:20px" class="form-group form-date" placeholder="年/月/日" name = "startActiveDate"  value="">
                            </div>
                            <div class="form-group" >
                                <label>生效时间止</label>
                                <input type="text" style = "width:200px;margin-left:20px" class="form-group form-date" placeholder="年/月/日" name = "endActiveDate"  value="">
                            </div>
                            <div class="form-group" >
                                <label >是否啟用</label>
                                <select style = "width:200px;margin-left:20px" class = "form-group" name="enabledFlag">
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select></br>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                </form>
            </div>
        </div>
    </div>

    <!--删除-->
    <div class="modal fade" id="myModal1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">警告！</h4>
                </div>
                <div class="modal-body">
                    <p>确认删除？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                    <button type="button" onclick="delItem()" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
    </div>

    <!--修改-->
    <div class="modal fade" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Modify the information</h4>
                </div>
                <form action = "" method = "post" id = "update">
                    <div class="modal-body">
                        <div class="form-group">
                            <label >物料编码</label>
                            <input type="text" id="itemCode" style = "width:200px;margin-left:20px" class = "form-group" name = "itemCode"  value="" readonly unselectable="on"   disabled>
                        </div>
                        <div class="form-group">
                            <label >物料描述</label>
                            <input type="text" id = "itemDescription" style = "width:200px;margin-left:20px" class = "form-group"  name = "itemDescription"  value="">
                        </div>
                        <div class="form-group" >
                            <label >物料單位</label>
                            <input type="text" id = "itemUom" style = "width:200px;margin-left:20px"  class = "form-group" name = "itemUom"  value="">
                        </div>
                        <div class="form-group" >
                            <label >生效时间从</label>
                            <input type="text" style = "width:200px;margin-left:20px" id = "startActiveDate"  class="form-group form-date" name = "startActiveDate"  value="" placeholder="年/月/日">
                        </div>
                        <div class="form-group" >
                            <label >生效时间至</label>
                            <input type="text" style = "width:200px;margin-left:20px" id = "endActiveDate" class="form-group form-date" name = "endActiveDate"  value="" placeholder="年/月/日">
                        </div>
                        <div class="form-group" >
                            <label >是否启用</label>
                            <select style = "width:200px;margin-left:20px" name="enabledFlag" class = "form-group">
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select></br>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
</body>
<script type="text/javascript">

    function check() {
        var ids = "";
        $('input[name="checkbox"]:checked').each(function(){
            ids+=$(this).val()+',';
        });
        if (ids.length > 0) {
            ids = ids.substring(0,ids.length - 1);
        }
        window.location.href = "/batch?ids="+ids;
    }

    function dateTable() {
        window.location.href = "/dateTable?name=数据表格"
    }

    function Modify(itemId){
        var ajaxUrl = "/queryId?itemId=" + itemId;
        $.ajax({
            url:ajaxUrl,
            type : 'POST',
            dateType:"json",
            success:function (data) {
                $("#itemCode").val(data.itemCode) ;
                $("#itemDescription").val(data.itemDescription);
                $("#itemUom").val(data.itemUom);
                $("#startActiveDate").val(data.startActiveDate);
                $("#endActiveDate").val(data.endActiveDate);
                $("#enabledFlag").val(data.enabledFlag);
                var url = '/update?itemId='+data.itemId;
                $("#update").attr('action',url);
            }
        })
    }

    $('#myPager').pager({
        recPerPage:5
    });

    var id = 0;

    function del(itemId) {
        id = itemId;
    }
    
    function delItem() {
        window.location.href = "/delItem?itemId=" + id;
    }
    
    function empty(){
        $(" #ip1").val("");
        $(" #ip2").val("");
        $(" #ip3").val("0");
        $(" #ip4").val("");
        $(" #ip5").val("");
        $(" #ip6").val("")
    }

    $('table.datatable').datatable({sortable: true,});
    $(".form-date").datetimepicker({
        language:  "zh-CN",
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        format: "yyyy-mm-dd"
    });
</script>
</html>
